<template>
  <view class="Refrigerator-voice">
    <view class="voice-label">
      <view
        class="label-items"
        :class="{ active: items.key === selectKey }"
        v-for="(items, index) in voiceData"
        :key="index"
        @click="changeShowData(items.key)"
      >
        {{ items.title }}
      </view>
    </view>
    <view class="voice-content" v-if="voiceData.length > 0">
      <view class="content-items" v-for="(item, index) in voiceData[selectKeyIndex].data" :key="index">
        <view class="items-box" v-if="selectKey === '1'" v-for="(group, groupkey) in item.content" :key="groupkey">
          <view class="items-showcontent">
            <view>{{ `“${group}”` }}</view>
            <view class="items-tips">{{ item.title }}</view>
          </view>
        </view>
        <view v-else class="items-box">
          <view class="items-showcontent">{{ `“${item}”` }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { getInventoryStatic } from '@/api/refrigetorB'
import type { VoiceData, VoiceItems } from '@/api/refrigetorB'
const props = defineProps<{
  show: boolean
}>()
watch(
  () => props.show,
  () => {
    getVoiceData()
  }
)
const voiceData = ref<VoiceData[]>([])
const selectKey = ref('1')
const selectKeyIndex = ref(0)
async function getVoiceData() {
  const res = await getInventoryStatic()
  if (res.code === 0) {
    voiceData.value = res.data
  }
}
function changeShowData(key: string) {
  selectKey.value = key
  selectKeyIndex.value = voiceData.value.findIndex((items) => items.key === selectKey.value)
}
</script>
<style lang="less" scoped>
.Refrigerator-voice {
  .voice-label {
    display: flex;
    margin-top: 52rpx;
    .label-items {
      width: 33%;
      text-align: center;
      color: #2d3746;
      font-weight: 500;
      line-height: 20px; /* 125% */
      letter-spacing: -0.5px;
      opacity: 0.6;
    }
  }
  .voice-content {
    padding: 0 32rpx;
    margin-top: 48rpx;
    .content-items {
      .items-box {
        width: calc(100% - 64rpx);
        background: #f4f4f6;
        padding: 24rpx;
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
      }
      .items-showcontent {
        color: var(--primary-petrol, #2d3746);
        font-size: 14px;
        font-weight: 500;
      }

      .items-tips {
        margin-top: 10rpx;
        color: var(--primary-petrol, #2d3746);
        font-size: 12px;
        font-weight: 400;
        line-height: 20px; /* 166.667% */
        opacity: 0.8;
      }
    }
  }
  .active {
    color: var(--primary-petrol, #2d3746);
    opacity: 1 !important;
    position: relative;
    &::after {
      position: absolute;
      width: 64rpx;
      left: calc(50% - 32rpx);
      bottom: -12rpx;
      content: '';
      display: block;
      height: 4rpx;
      background: #2d3746;
      box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.2);
    }
  }
}
</style>
